<template>
  <el-main><h1>角色页面</h1></el-main>


  <el-row :gutter="24">
    <el-col :span="12">
      <el-card shadow="always">
        <el-button type="primary" size="mini" @click="point" >点我</el-button>
      </el-card>
    </el-col>

    <el-col :span="12">
      <el-card shadow="hover"> 我是SVG
<!--                  <div>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11.6929in" id="svgcanvas"
               height="8.26772in"
               viewBox="0 0 841.89 595.276" xml:space="preserve" @mousewheel="zoomimg" color-interpolation-filters="sRGB" class="st4">
        <g>
        <title>页-1</title>
       <g id="A1" transform="translate(372.047,-269.291)">
          <title>矩形.2</title>
         <rect id="B1" x="0" y="406.772" width="35.4331"  height="188.504" class="st1"/>
        </g>
       <g id="A2" transform="translate(311.811,-238.11)">
           <title>矩形</title>
         <rect id="B2" x="0" y="561.26" width="155.906" height="34.0157" class="st2"/>
        </g>
       <g id="A3" transform="translate(311.811,-453.543)">
          <title>矩形.4</title>
         <rect id="B3" x="0" y="561.26" width="155.906" height="34.0157" class="st3"/>
        </g>
        <g id="shape6-7"  transform="translate(311.811,-525.118)">
            <rect x="0" y="568.346" width="155.906" height="26.9291" class="st4"/>
            <text x="23.95" y="587.21" class="st5" >
              <tspan class="st6">{{ title }}</tspan>
            </text>
		    </g>
        </g>
      </svg>
    </div>-->
        <embed id="emb"  type="image/svg+xml"  src="/api/profile/test.svg"/>
<!--        <iframe id="svgframe" src="/static/iframe/jiaotong.html" width="768px" height="768px"></iframe>-->
      </el-card>
    </el-col>
  </el-row>


</template>

<script>
import request from "../utils/request";
import * as d3 from "d3";

import $ from "jquery";

export default {
  name: 'role',
  components: {},
  data() {
    return {
      title:"交通信号控制",
    }
  },

  //页面加载完立即执行的方法
  created() {

  },
  methods: {
    point(){

      let d = emb.getSVGDocument();   //获取emb标签

      let svg = d.documentElement;    //获取svg

      let B1 = svg.getElementById("B1");  //获取B1节点

      //alert(B1.getAttribute("fill"));

      B1.setAttribute("fill","black");  //修改B1节点的样式

    },

  }
}
</script>

<!--
<style type="text/css">
.st1 {
  fill: #538135;
  stroke: #c7c8c8;
  stroke-width: 0.25
}

.st2 {
  fill: #4672c4;
  stroke: #c7c8c8;
  stroke-width: 0.25
}

.st3 {
  fill: #ff0000;
  stroke: #c7c8c8;
  stroke-width: 0.25
}

.st4 {
  fill: none;
  fill-rule: evenodd;
  font-size: 12px;
  overflow: visible;
  stroke-linecap: square;
  stroke-miterlimit: 3
}

.st5 {fill:#ff0000;font-family:微软雅黑;font-size:1.5em}
.st6 {font-size:1em;text-decoration:underline}
</style>-->
